<template>
    <main-layout>
        <p class="headerTitle">我的收藏</p>
        <div>
            <div class="collections" v-for="item in colArray" :key="item.title">
                <img :src="item.img" alt="" >
                <div class="colInfo">
                    <p>{{item.title}}</p>
                    <span>{{Math.ceil(Math.random()*10000)}}人收藏&emsp;&emsp;{{Math.ceil(Math.random()*10000)}}人点赞</span>
                    <p class="delete" @click="deleteEvt(item)">删除</p>
                </div>
            </div>
        </div>
    </main-layout>
</template>

<script>

    export default {
        data(){
            return {
                colArray:[]
            }
        },
        created(){
            this.getmyCollections()
        },
        methods:{
            //获取我的收藏数据
            async getmyCollections(){
                let colStr = localStorage.getItem('newCollections')
                this.colArray = JSON.parse(colStr) || []
                console.log(this.colArray);
            },

            deleteEvt(item){
                let colStr = localStorage.getItem('newCollections')
                this.colArray = JSON.parse(colStr) || []
                let index = this.colArray.findIndex(it => it.title == item.title)
                //删除数组元素
                this.colArray.splice(index, 1)
                localStorage.setItem('newCollections',JSON.stringify(this.colArray))
                this.$toast.success('删除成功')
            }
        }
    }
</script>

<style lang="less" scoped>
    .headerTitle {
        margin-left: 42%;
        font-size: 25px;

    }
    .collections {
        width: 100%;
        margin: 10px;
        display: flex;
        align-items: center;
            > img {
                width: 40%;
                height: 130px;
                border-radius: 10%;
            }
            
            > .colInfo  {
                width: 100%;
                margin-left: 15px;
                p{
                    font-size: 20px;
                    padding-right: 20px;
                }

                span {
                    font-size: 14px;
                    color: grey;
                }
                > .delete {
                    font-size: 16px;
                    color: rgb(129, 13, 13);
                }
            }
    }
</style>